<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

// 图表配置
const option = {
    xAxis: {  // 横坐标
        type: 'category',
        data: ['2020', '2021', '2022', '2023', '2024']
    },
    yAxis: {  // 纵坐标
        type: 'value'
    },
    series: [
        {
            type: 'line',
            data: [560, 680, 730, 1012, 1084]
        }
    ]
}

// 定义ref
const chartRef = ref()

// 挂载方法
onMounted(() => {
    const chartDom = chartRef.value
    // echarts 图表初始化
    const myCharts = echarts.init(chartDom, null, { renderer: 'svg' })
    // 设置图标的选项
    myCharts.setOption(option)

})

</script>
<template>
    <div ref="chartRef" :style="{ with: '100%', height: '400px' }"></div>
</template>